---
title: Variants
description: Learn how to customize the Emblor tag input component with various props and options.
---

## Demos

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Variant</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Choose from different visual styles like default, primary, and destructive.
</p>

<ComponentPreview propName="variant" selectOptions={['default', 'primary', 'destructive']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Size</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Adjust the size of the tags.</p>

<ComponentPreview propName="size" selectOptions={['sm', 'md', 'lg', 'xl']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Shape</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Customize the shape of the tags.</p>

<ComponentPreview propName="shape" selectOptions={['default', 'square', 'rounded', 'pill']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Border styles</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Choose between different border styles or opt for no border at all.
</p>

<ComponentPreview propName="borderStyle" selectOptions={['default', 'solid', 'dashed', 'dotted', 'double', 'none']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Text case</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Control the text casing within the tags.</p>

<ComponentPreview propName="textCase" selectOptions={['uppercase', 'lowercase', 'capitalize']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Interaction</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">
  Define the interaction style of the tags. Make them clickable or non-clickable.
</p>

<ComponentPreview propName="interaction" selectOptions={['clickable', 'non-clickable']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Animations</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Add animations on render for tags.</p>

<ComponentPreview propName="animation" selectOptions={['none', 'fadeIn', 'slideIn', 'bounce']} />

<h3 className="font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight">Text styles</h3>
<p className="leading-7 [&amp;:not(:first-child)]:mt-4 text-normal">Customize the text style within the tags.</p>

<ComponentPreview propName="textStyle" selectOptions={['normal', 'bold', 'italic', 'underline', 'lineThrough']} />
